import React, { Component } from 'react';

class Menuitem extends Component {
  state = {
    visible: false
  }
  render() {
    const { title, children } = this.props
    const { visible } = this.state
    return (
      <div className="menu-item">
        {/* 展示标题 */}
        <b onClick={ () => this.setState({ visible: !visible }) }>{ title }</b>
        {/* 是否子数据  visible */}
        <div className="menu-item-sel" style={{ display: visible ? 'block' :'none' }}>
          <ul>
            {
              children.map(v => {
                return <li key={v.id}>{ v.title }</li>
              })
            }
          </ul>
        </div>
      </div>
    );
  }
}

export default Menuitem;
